<template>
  <!-- 医疗机构列表 -->
  <div class="hospital-manage-list">
    <el-container class="container-box">
      <el-header height="auto">
        <el-form
          ref="searchForm"
          :inline="true"
          :model="searchFormData"
          class="hospital-search-form"
          label-width="140px"
        >
          <el-form-item
            label="医疗机构名称"
            prop="hospitalName">
            <el-input v-model="searchFormData.hospitalName"/>
          </el-form-item>
          <el-form-item
            label="联系人"
            prop="contactPerson">
            <el-input
              v-model="searchFormData.contactPerson"
              placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm">
              <i class="iconfont el-icon-refresh-right"/>
              重置</el-button>
            <el-button
              type="primary"
              @click="searchForm"
              :class="{'isAddWidth':submitLoading}"
              :loading="submitLoading"
            >
              <i
                class="iconfont el-icon-search"
                :class="{'isdisplay':submitLoading}" />
              {{ submitLoading?'':'查询' }}</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-editable
        height="200px"
        v-loading="table.tableLoading"
        class="hospital-edit-box"
        :data="table.tableData"
        :columns="table.tableColumns"
      >
        <template
          slot="default-index"
          slot-scope="scope">{{ scope.$index + 1 }}</template>
        <template
          slot="default-waitAuditCount"
          slot-scope="scope">
          <el-button
            size="small"
            @click.stop="jumpToProduct(scope,1)"
            type="text"
          >{{ scope.row.waitAuditCount }}</el-button>
        </template>
        <template
          slot="default-passProductCount"
          slot-scope="scope">
          <el-button
            size="small"
            @click.stop="jumpToProduct(scope,2)"
            type="text"
          >{{ scope.row.passProductCount }}</el-button>
        </template>
        <template
          slot="default-refuseProductCount"
          slot-scope="scope">
          <el-button
            size="small"
            @click.stop="jumpToProduct(scope,3)"
            type="text"
          >{{ scope.row.refuseProductCount }}</el-button>
        </template>
        <template
          slot="default-stopCount"
          slot-scope="scope">
          <el-button
            size="small"
            @click.stop="jumpToProduct(scope,4)"
            type="text"
          >{{ scope.row.stopCount }}</el-button>
        </template>
      </el-editable>
      <el-pagination
        align="right"
        style="margin-top:10px;"
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="page.page"
        :page-sizes="page.pageNumber"
        :page-size="page.size"
        :layout="page.pageLayout"
        :total="page.total"
      />
    </el-container>
  </div>
</template>
<script>
import ElEditable from '@components/el-editable/index.vue'
import { PAGINATION_LAYOUT, PAGE_NUMBER } from '@const/common'
import paginationMixin from '@mixins/paginationMixin.js'
import { hospitalColumns } from './const.js'
import { hospitalPageList } from '@const/beforeSettleApi.js'
import { hasIn } from 'lodash'
export default {
  name: 'HospitalManageList',
  components: {
    ElEditable
  },
  mixins: [paginationMixin],
  data () {
    return {
      submitLoading: false,
      page: {
        // 页码数组
        pageNumber: PAGE_NUMBER,
        // 页码功能布局
        pageLayout: PAGINATION_LAYOUT
      },
      table: {
        tableLoading: false,
        tableColumns: hospitalColumns,
        tableData: []
      },
      searchFormData: {
        hospitalName: '',
        contactPerson: ''
      },
      hospitalOps: [],
      hospitalOpsLoading: false
    }
  },
  methods: {
    getItems () {
      this.table.tableLoading = true
      this.submitLoading = true
      this.$axios({
        method: 'post',
        url: hospitalPageList,
        // url: 'http://47.110.130.245:3000/mock/163/guoke-deepexi-auth-center/api/v1/authSupplierHospital/hospitalPageList',
        data: {
          page: this.page.page,
          pageSize: this.page.size,
          enterpriseName: this.searchFormData.hospitalName,
          contactName: this.searchFormData.contactPerson
        }
      })
        .then(res => {
          let arr = hasIn(res, 'data.payload.content')
            ? res.data.payload.content
            : []
          this.table.tableData = arr
          this.page.total = res.data.payload.totalElements
        })
        .catch(() => {})
        .finally(() => {
          this.table.tableLoading = false
          this.submitLoading = false
        })
    },
    searchForm () {
      this.getItems()
    },
    resetForm () {
      this.$refs.searchForm.resetFields()
    },
    jumpToProduct (scope, status) {
      this.$router.push({
        path: '/distributorSide/channelManagement/applyHospitaAuth/addProduct',
        query: { id: scope.row.id, enterpriseId: scope.row.enterpriseId, status: status, name: scope.row.enterpriseName }
      })
    }
  },
  mounted () {
    this.getItems()
  }
}
</script>
<style lang="less">
.hospital-manage-list {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
